<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<div id="view">
    <!--<my-div></my-div>-->
    <el-button></el-button>
    <el-button></el-button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 1
            }
        },
        methods: {}
    })
    // 自定义组件(也是一个实例)component(组件名称，{template}) 并且在当前vue实例中全局可用
    // 使用组件的地方会被替换成 template 中定义的标签
    app.component('my-div', {
        data() {
            return {
                message: '自定义组件'
            }
        },
        template: `
          <h3>{{ message }}</h3>
          <button>自定义的按钮</button>
        `
    })

    app.component('el-button', {
        data() {
            return {
                message: '这是我自己自定义的button',
                count: 1
            }
        },
        methods: {
            changeCount() {
                this.count++
            }
        },
        template: `
          <h3>{{ message }}</h3>
          <button style="background-color: #b3e19d" @click="changeCount">自定义的按钮{{ count }}</button>
        `
    })
    app.mount("#view")
</script>
</body>
</html>